import { Button, Modal, TextField, Icon, Link } from "@shopify/polaris";
import { DeleteMinor, AddMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./index.module.less";

interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //

  const handleChange = useCallback(() => setActive(!active), [active]);

  //   const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>无法编辑订单</div>
      </div>
      <div className={styled.CHXPO}>
        <div style={{ display: "flex" }}>
          <div>无法编辑已存档的订单。 </div>
          <Link>了解详细信息</Link>
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            关闭
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
